<template>
  <div class="search-group">
    <slot></slot>
    <div class="titleLine" v-if="title&&title.length > 0">
      {{title}}
    </div>
    <div class="tabLine" v-if="tabData&&tabData.valueArray&&tabData.valueArray.length >0 ">
      <div v-for="(item,index) in tabData.valueArray" :key="index" :class="'tabBox ' + (tabIndexChecked==index?'active':'') " @click="tabOnClick(index)">
          {{item.name}}
      </div>
    </div>
    <a-form  :class="classObj" :form="form" @submit="handleSearch" labelAlign="left" >
      <a-row type="flex">
        <a-col flex="auto">
          <a-row :gutter="24" >
            <div  v-for="(item, i) in searchData" :key="i">
              <!--          输入框-->
              <a-col :span="8"  v-if="tabData&&(item.tabIndex > -1)? (item.tabIndex == tabIndexChecked && item.type == 'doubleTime') : item.type == 'doubleTime'" >
                <a-form-item     :label="item.labelBegin||'开始时间'"   :key="i">
                <a-date-picker
                  :allowClear="false"
                  v-decorator="[
                'startTime',
                {
                  rules: [
                    {
                      // message: 'Input something!',
                      // setFieldsValue: function () {
                      //   return 'all'
                      // }
                    },
                  ],
                  initialValue: item.option&&item.option.defaultValueBegin || null
                },
              ]"
                  inputReadOnly
                  :disabled="!!item.option&&item.option.disabled"
                  :show-time="item.option&&item.option.showTime"
                  :format="item.option&&item.option.format || (item.option&&item.option.showTime?'YYYY-MM-DD HH:mm:ss':'YYYY-MM-DD')"
                  :value-format="item.option&&item.option.valueFormat || (item.option&&item.option.showTime?'YYYY-MM-DD HH:mm:ss':'YYYY-MM-DD')"
                  :disabledDate="disableDateBegin"
                />
              </a-form-item>
              </a-col>
              <a-col :span="8" v-if=" tabData&&(item.tabIndex > -1)? (item.tabIndex == tabIndexChecked && item.type == 'doubleTime') : item.type == 'doubleTime'">
                <a-form-item      :label="item.labelEnd||'结束时间'"   :key="i+1000">
                <a-date-picker
                  :allowClear="false"
                  v-decorator="[
                'endTime',
                {
                  rules: [
                    {
                      // message: 'Input something!',
                      // setFieldsValue: function () {
                      //   return 'all'
                      // }
                    },
                  ],
                  initialValue: item.option&&item.option.defaultValueEnd
                },
              ]"
                  inputReadOnly
                  :disabled="!!item.option&&item.option.disabled"
                  :show-time="item.option&&item.option.showTime"
                  :format="item.option&&item.option.format || (item.option&&item.option.showTime?'YYYY-MM-DD HH:mm:ss':'YYYY-MM-DD')"
                  :value-format="item.option&&item.option.valueFormat || (item.option&&item.option.showTime?'YYYY-MM-DD HH:mm:ss':'YYYY-MM-DD')"
                  :disabledDate="disableDateEnd"
                />
              </a-form-item>
              </a-col>
              <a-col :span="8" v-if=" tabData&&(item.tabIndex > -1)? (item.tabIndex == tabIndexChecked && item.type != 'doubleTime') :  item.type != 'doubleTime'">
                <a-form-item :label="item.label" :key="i">
                  <a-input
                    autocomplete="off"
                    :da="item.dataIndex"
                    v-if="item.type == 'input'"
                    :style="{...item.style}"
                    :disabled="!!item.option.disabled"
                    v-decorator="[
                `${item.dataIndex || ('field-'+ i)}`,
                {
                  rules: [
                    {
                      // required: true,
                      // message: 'Input something!',
                    },
                  ],
                  initialValue: item.option.defaultValue
                },
              ]"
                    :placeholder="item.option.placeholder"
                  />

                  <!-- 下拉框-->
                  <a-select
                    v-if="item.type == 'select'"
                    :style="{...item.style}"
                    @change="(val)=>{changefff(val,item)}"
                    :disabled="!!item.option.disabled"
                    :mode="!!item.option.multiple ? 'multiple' : 'default'"
                    :name="item.dataIndex"
                    :dropdownMatchSelectWidth="false"
                    :show-search="item.showSearch ? true : false"
                    :filter-option="!!item.filterOption ? item.filterOption : ()=>{}"
                    v-decorator="[
                        `${item.dataIndex || ('field-'+ i)}`,
                        {
                          rules: [],
                          initialValue: item.option.defaultValue
                        },
                      ]"
                      :placeholder="item.option.placeholder"
                    >
                    <a-select-option v-for="(optionItem) in item.option.optionList" :value="optionItem.value" :key="optionItem.value">
                      {{ optionItem.name }}
                    </a-select-option>
                  </a-select>
                  <!--单日期选择-->
                  <a-date-picker
                    v-if="item.type == 'date'"
                    :style="{...item.style}"
                    :allowClear="false"
                    :disabledDate="item.option.disabledDate ? item.option.disabledDate : () => {}"
                    v-decorator="[
                `${item.dataIndex || ('field-'+ i)}`,
                {
                  rules: [],
                  initialValue: item.option.defaultValue
                },
              ]"
                    :inputReadOnly="!!item.option.inputReadOnly"
                    :disabled="!!item.option.disabled"
                    :show-time="!!item.showTime"
                    :format="item.option.format || 'YYYY-MM-DD HH:mm:ss'"
                    :value-format="item.option.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
                  />

                  <a-range-picker
                    v-if="item.type == 'rangeDate'"
                    :style="{...item.style}"
                    :allowClear="item.option.allowClear"
                    :disabledDate="item.option.disabledDate ? item.option.disabledDate : () => {}"
                    v-decorator="[
                `${item.dataIndex || ('field-'+ i)}`,
                {
                  rules: [],
                  initialValue: item.option.defaultValue
                },
              ]"
                    :inputReadOnly="!!item.option.inputReadOnly"
                    :disabled="!!item.option.disabled"
                    :show-time="!!item.showTime"
                    :format="item.option.format || 'YYYY-MM-DD HH:mm:ss'"
                    :value-format="item.option.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
                  >
                    <template slot="dateRender" slot-scope="current">
                      <div class="ant-calendar-date" :style="getCurrentStyle(current)">
                        {{ current.date() }}
                      </div>
                    </template>
                  </a-range-picker>

            <!--树型下拉-->
<!--            v-model="value"-->
                  <a-tree-select
                    v-if="item.type == 'treeSelect'"
                    :show-search="item.option.showSearch"
                    :style="{width:'100%', ...item.style}"
                    :multiple="!!item.option.multiple"
                    :allow-clear="item.option.allowClear"
                    :name="item.dataIndex"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    :tree-data="item.option.optionList"
                    :placeholder="item.option.placeholder||'请选择'"
                    tree-default-expand-all
                    v-decorator="[
                `${item.dataIndex || ('field-'+ i)}`,
                  {
                    rules: [],
                    initialValue: item.option.defaultValue
                  },
              ]"
                  />
                </a-form-item>
              </a-col>

            </div>
          </a-row>
        </a-col>

        <a-col flex="156px">
          <div class="search-btn-box">
            <a-button  @click="handleReset" :style="{fontSize:'14px', marginLeft: '16px'}">
              重置
            </a-button>
            <a-button @click="handleSearch" :style="{ marginLeft: '12px',fontSize:'14px' }" type="primary" html-type="submit">
              查询
            </a-button>
          </div>
        </a-col>
      </a-row>
    </a-form>
    <div class="line"></div>
  </div>
</template>
<script>
// import moment from 'moment'
export default {
  name: 'SearchGroup',
  props: ['searchData', 'CollectTypeChange', 'searchFn', 'resetSearchOption', 'title', 'tabData', 'labelWidth'],
  data () {
    return {
      classObj: {
        'ant-advanced-search-form': true
        // width labelWidth || labelWidthCont || 4
      },
      labelWidthCont: 4,
      showModal: false,
      expand: false,
      form: this.$form.createForm(this, {name: 'advanced_search'}),
      // 需要包含空格的字段
      hasKongKeyList: ['endTime', 'startTime'],
      tabIndexChecked: 0
    }
  },
  beforeCreate () {

  },
  created () {
    console.log('22222222-->:', this.searchData)
    if (this.searchData.length <= 3) {
      this.classObj.widthAuto = true
      console.log(this.classObj)
    } else if (this.labelWidth) {
      this.classObj['width' + this.labelWidth] = true
    } else {
      this.labelWidthContFn()
    }
    console.log(99999911, this.classObj)
  },
  computed: {

  },
  methods: {
    labelWidthContFn: function () {
      let n = 0
      console.log('searchData:', this.searchData)
      this.searchData.map(item => {
        console.log('item:', item)
        let len
        if (!item.label) {
          len = item.labelBegin.length > item.labelEnd.length ? item.labelBegin.length : item.labelEnd.length
          item.label = item.labelBegin || item.labelEnd
        } else {
          len = item.label.length
        }
        let text = item.label.match(/[^\x00-\xff]/g) || []
        let textLen = text.length
        let resultLen = textLen + Math.ceil(len - textLen) / 2
        resultLen = resultLen || textLen
        n = resultLen > n ? resultLen : n
        return resultLen
      })
      this.labelWidthCont = n
      this.classObj['width' + this.labelWidthCont] = true
    },
    changefff (val, item) {
      let fnName = item.changeFn
      if (fnName) {
        this.$parent[fnName](val)
      }
    },
    handleSearch (e) {
      e && e.preventDefault()
      this.form.validateFields((error, values) => {
        console.log(values)
        let copyVal = JSON.parse(JSON.stringify(values))
        console.log(8888123, copyVal)
        for (let k in copyVal) {
          let v = copyVal[k]
          let trimV = ''
          if (v) {
            trimV = v.toString().trim() // v.toString().replace(/\s*/g, '')
          }
          if (this.hasKongKeyList.indexOf(k) > -1) {
            trimV = v
          }
          if (typeof v === 'string') {
            if (trimV.length == 0) {
              delete copyVal[k]
            } else {
              copyVal[k] = trimV
            }
          }
        }
        this.searchDataTypeFormat(copyVal)

        this.$emit('searchFn', copyVal, true)
      })
    },
    // 按制定类型格式化数据
    searchDataTypeFormat (data) {
      for (let k in data) {
        let itemData = this.searchData.filter(item => item.dataIndex == k)
        console.log(itemData)
        if (itemData.length > 0 && itemData[0].valueType) {
          let type = itemData[0].valueType
          console.log('type', type)
          switch (type) {
            case 'string':
              data[k] = data[k].toString()
              break
            case 'number':
              data[k] = Number(data[k])
              break
          }
        }
      }
      if (this.tabData && this.tabData.filterName) { data[this.tabData.filterName] = this.tabData.valueArray && this.tabData.valueArray[this.tabIndexChecked] && this.tabData.valueArray[this.tabIndexChecked].value || '' }
    },
    handleReset () {
      // 重置采集协议Option
      this.$emit('resetSearchOption', '')
      // this.resetSearchOption();
      this.form.resetFields()
      // this.tabIndexChecked = 0
    },
    tabOnClick (index) {
      this.tabIndexChecked = index
      this.handleSearch()
    }
  }
}
</script>

<style lang="less" scoped>
.search-group {
  width: 100%;
  padding: 17px 16px;
  padding-bottom: 0px;
  background: #ffffff;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  //border-bottom: 1px solid #E9ECF0;
  //margin-bottom: 15px;
  /deep/.ant-select-selection-selected-value{
    position: absolute;
  }
  /deep/ .ant-select-selection__choice{
    display: grid;
  }
  /deep/.widthAuto{
    .ant-form-item-label {
      width: auto !important;
    }
  }
  /deep/.width2 {
   .ant-form-item-label {
      width: 20px !important;
    }
  }
  /deep/.width3 {
    .ant-form-item-label {
      width: 60px !important;
    }
  }
  /deep/.width4 {
    .ant-form-item-label {
      width: 70px !important;
    }
  }
  /deep/.width5 {
    .ant-form-item-label {
      width: 85px !important;
    }
  }
  /deep/.width6{
    .ant-form-item-label {
      width: 100px !important;
    }
  }
  /deep/.width7 {
    .ant-form-item-label {
      width: 115px !important;
    }
  }
  /deep/.width8 {
    .ant-form-item-label {
      width: 130px !important;
    }
  }
  /deep/.width9 {
    .ant-form-item-label {
      width: 20px !important;
    }
  }
  /deep/.width10 {
    .ant-form-item-label {
      width: 20px !important;
    }
  }
  .titleLine{
    font-size: 16px;
    color: #1B1E22;
    font-weight: 900;
    padding-bottom: 10px;
    text-align: left;
  }
  .tabLine{
    height:32px;
    margin-bottom: 16px;
    .tabBox{
      cursor:pointer;
      width:fit-content;
      height: 32px;
      padding: 6px 16px;
      text-align: center;

      background: #ffffff;
      font-size: 14px;
      float:left;
      margin-right: 12px;
      &.active{
        color:#4487F7;
        background: #F2F3F5;
        border-radius: 17px;

      }
    }
  }

  .line {
    height: 1px;
    width: 100%;
    background: #E9ECF0;
    margin-top: 3px;
  }
  .search-btn-box {
    height: 100%;
    padding-bottom: 13px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;  //换成
  }
  /deep/.ant-form-item {
    display: flex;
  }
  /deep/.ant-form-item-control-wrapper {
    flex: 1;
  }
  /deep/.ant-form {
    max-width: none;
  }
  /deep/.ant-form-item {
    margin-bottom: 9px;
  }
  /deep/.ant-form-item-label {
    //text-align: left;
    label {
      font-size: 14px;
      line-height: 40px;
      color: rgba(27,30,34,0.85);
      letter-spacing: 0;
      text-align: right;
      font-weight: 400;
    }
  }
  /deep/.ant-calendar-picker{
    display: inline-block;
    width: 100%;
  }
}
</style>
